<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const newTodo = ref('')

const increment = () => {
  store.dispatch('increment')
}

const decrement = () => {
  store.dispatch('decrement')
}

const addTodo = () => {
  if (newTodo.value.trim()) {
    store.dispatch('addTodo', newTodo.value)
    newTodo.value = ''
  }
}
</script>

<template>
  <div class="counter-container">
    <h2>Vuex 计数器示例</h2>
    
    <div class="counter">
      <button @click="decrement">-</button>
      <span>{{ store.getters.getCount }}</span>
      <button @click="increment">+</button>
    </div>

    <div class="todo-section">
      <h3>待办事项</h3>
      <div class="add-todo">
        <input 
          v-model="newTodo" 
          @keyup.enter="addTodo"
          placeholder="输入待办事项"
        >
        <button @click="addTodo">添加</button>
      </div>
      
      <ul>
        <li v-for="(todo, index) in store.getters.getTodos" 
            :key="index">
          {{ todo }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.counter-container {
  padding: 20px;
  text-align: center;
}

.counter {
  margin: 20px 0;
}

button {
  padding: 5px 15px;
  margin: 0 10px;
  cursor: pointer;
}

.todo-section {
  margin-top: 30px;
}

.add-todo {
  margin: 15px 0;
}

input {
  padding: 5px;
  margin-right: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 5px 0;
}
</style> 